<template>
  <div class="c-minh c-bg-sgray">
    <div v-if="listType == 0">
      <new-search-bar class="c-bg-white" :placeholder="'请输入昵称或手机号'" :searchText="searchName" @search="startSearch" @cancel="startSearch"></new-search-bar>
      <div class="c-ph24">
        <div class="c-mt20 c-bg-white c-flex-row c-ph20 c-pv20 c-br12" v-for="(item, index) in list" :key="index" @click="goCustomDetail(item.userId, item.virtualId)">
          <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww80 c-hh80 c-brp50"/>
          <div class="c-flex-column c-flex-grow1 c-flex-shrink0 c-w0 c-ml20">
            <div class="c-flex-row">
              <span class="c-fw-b c-fs24 c-text-ellipsis1 c-lh40" :class="item.type==0 ? 'c-maxw360' : 'c-maxw200'">{{item.nickname || item.mobile}}</span>
              <template>
                <!-- //非股东 -->
                <div class="c-flex-row c-aligni-center c-pl10" v-if="item.type==0">
                  <img src="../../../../public/i/wap/memberIndex/normalVip.png" alt="" class="c-ww36 c-hh36 imgCloseBig c-p c-block">
                  <div class="c-bg-f2 c-text-ellipsis1 c-fc-sblack c-pr10 c-pl10 c-textAlign-c c-ml-22 c-pl28 c-lh-n c-br16 c-maxw242 c-fs18 c-pv2 c-flex-row c-aligni-center">非股东</div>
                </div>
                <!-- //股东1-9 -->
                <div class="c-flex-row c-aligni-center c-pl10" v-else>
                  <img src="../../../../public/i/wap/memberIndex/mbAgent.png" alt="" class="c-ww50 imgCloseBig c-p c-inlineblack c-vcAlign-middle">
                  <div class="c-mbIndexBg1 c-maxw242 c-fs18 c-fc-white c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
                    {{item.sName}}</div>
                </div>
              </template>
            </div>
            <div class="c-fs20 c-fc-gray c-flex-row c-justify-sb c-mt16">
              <span class="">{{item.userId ? 'ID：' + item.userId : ''}}</span>
              <span class="">消费总额：{{'￥' | iosPriceFilter}}{{item.consumeMoney}}</span>
            </div>
            <div class="c-fc-gray c-fs20 c-mt16" v-if="item.activeTime">最近活跃：{{item.activeTime}}</div>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无客户"></loading-status-tem>
    </div>

    <div class="c-p" v-if="listType == 1">
      <div class="c-p" :class="isShareholder ? 'courseShareholder' : 'courseNoShareholder'"></div>
      <div class="bt-wrapper c-p c-pz1" :class="isShareholder ? 'course-tgTrans' : 'course-tjTrans'">
        <div class="c-flex-row wrapper-list c-fs24 c-textAlign-c">
          <div class="c-pv24 c-flex-1 c-flex-column c-p" :class="spreadTabIndex == 0 ? 'c-fs26 fc-brown' : 'c-fs24 fc-lbrown'" @click="changeSpreadTab(0)">
            <div>单品课程</div>
            <div :class="spreadTabIndex == 0 ? 'tab-icon bg-brown ' : ''"></div>
          </div>
          <div class="c-pv24 c-flex-1 c-flex-column c-p" :class="spreadTabIndex == 1 ? 'c-fs26 fc-brown' : 'c-fs24 fc-lbrown'" @click="changeSpreadTab(1)">
            <div>代金券</div>
            <div :class="spreadTabIndex == 1 ? 'tab-icon bg-brown ' : ''"></div>
          </div>
        </div>
        <div class="c-pt24" v-if="spreadTabIndex == 0">
          <div class="c-bg-white c-flex-row c-ph20 c-pv20 c-br12 c-mb20 c-mh20" v-for="(item, index) in list" :key="index" @click="goDetail(item.id, item.prodType)">
            <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" class="c-ww180 c-hh120 c-br8"/>
            <div class="c-flex-column c-justify-sb c-hh120 c-flex-grow1 c-flex-shrink0 c-w0 c-ml20">
              <div class="c-text-ellipsis1 c-fs24 c-fc-xblack c-lh34">{{item.name}}</div>
              <span class="c-fc-gray c-fs22 c-mt10">￥{{item.prodPrice && item.prodPrice.indexOf("~") > -1 ? (item.prodPrice.split("~")[0] + '~￥' + item.prodPrice.split("~")[1]) : item.prodPrice}}</span>
              <div v-if="isShareholder" class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs22 c-fw-b cColor">预计赚{{'￥' | iosPriceFilter}}{{item.income}}</div>
                <div class="bg-gradient c-fs18 c-pv8 c-fc-white c-ph30 c-br32" @click.stop="inviteFriends(item.id, item.prodType)">推广</div>
              </div>
              <div v-else class="c-flex-row c-justify-end c-aligni-center">
                <div class="bg-gradient c-fs18 c-pv8 c-fc-white c-ph30 c-br32" @click.stop="goDetail(item.id, item.prodType)">立即购买</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="c-ph24 c-pt24 c-fs20">
          <div class="c-ph20 c-bg-white c-br12 c-mb20" v-for="(item, index) in list" :key="index">
            <div class="c-bd-b1 c-pv20 c-flex-row" @click="goCouponDetail(item.redeemCodeId)">
              <div class="c-flex-column c-justify-sa c-aligni-center c-br10 c-ww120 c-hh132 coupon-left c-textAlign-c">
                <div class="c-fs28 c-fw-b c-fc-xlblown" v-if="item.type == 2 || item.type == 3 || item.type == 5 || item.type == 6">
                  <span v-if="item.type == 2 || item.type == 5"><span class="c-fw-n" v-if="item.type == 2">{{'￥' | iosPriceFilter}}</span>{{Number(item.price)}}<span v-if="item.type == 5">折</span></span>
                  <span v-if="item.type == 3 || item.type == 6"><span class="c-fw-n">{{'￥' | iosPriceFilter}}</span><span>{{Number(item.price)}}</span></span>
                </div>
                <div class="c-fs18 c-fc-sblown">
                  <span v-if="item.type != 3">{{couponType[item.type]}}</span>
                  <span v-else>满{{item.amount}}减{{item.price}}</span>
                </div>
              </div>
              <div class="c-flex-column c-justify-sb c-ml20 c-flex-grow1 c-w0 c-hh130">
                <div class="c-flex-column">
                  <div class="c-flex-row c-justify-sb c-aligni-center">
                    <div class="c-fs24 c-fc-xblack">{{item.name.length > 12 ? `${item.name.substr(0, 12)}...` : item.name }}</div>
                    <div class="c-ws-n" :class="item.status == 2 ? 'c-fc-xmlred' : 'c-fc-gray'">{{couponStatus[item.status]}}</div>
                  </div>
                  <span class="c-fc-gray c-mt8">剩余 {{item.leftNum}}, 已推广 {{item.successNum}}</span>
                </div>
                <div class="c-flex-row c-aligni-center" :class="Number(item.salePrice) > 0 ? 'c-justify-sb' : 'c-justify-end'">
                  <div class="c-fs26 fc-red c-fw-b" v-if="Number(item.salePrice) > 0"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.salePrice}}</div>
                  <div class="c-fc-white bg-gradient c-pv8 c-fs18 c-br32 c-ph30" v-if="item.status == 1 || item.status == 2" @click.stop="shareCoupon(item);">推广</div>
                </div>
              </div>
            </div>
            <div class="c-flex-row c-justify-sa c-pv20 c-fs22 c-fc-xblue">
              <div class="c-w33 c-textAlign-c" @click="goCouponDetail(item.redeemCodeId)">查看详情</div>
              <div class="c-w33 c-textAlign-c c-bd-l1" @click="goExchange(item.redeemCodeId)">领取明细</div>
              <div class="c-w33 c-textAlign-c c-bd-l1" @click="doCopy(item.redeemCodeId)" v-if="item.status == 1 || item.status == 2">复制链接</div>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataTextClass="c-fs24 c-fc-white" :noDataText="spreadTabIndex == 0 ? '暂无课程' : '暂无优惠券'"></loading-status-tem>
      </div>
    </div>

    <div v-if="listType == 3">
      <div class="c-p c-pb64">
        <img class="c-hh200 c-w100 c-maxw640" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/memberIndex/bg_blue_mb4.png"/>
        <div class="c-ph24 c-w100 c-maxw640 c-pa" style="top:0.55rem;">
          <div class="c-fs22 c-textAlign-r c-fc-white" @click="clickTimeModel()">
            {{timeMap[timeValue]}}<span class="icon iconfont c-fs10 c-ml10">&#xe714;</span>
          </div>
          <div class="c-mt20 c-bg-white c-br10 c-flex-row c-justify-sa c-flexw-wrap c-pb32" v-if="shareholderDetail">
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{Number(Number(shareholderDetail.amount) + Number(shareholderDetail.freezeMoney)).toFixed(2)}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">推广收益(元)</span>
            </div>
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{Number(shareholderDetail.amount).toFixed(2)}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">已结算(元)</span>
            </div>
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{Number(shareholderDetail.freezeMoney).toFixed(2)}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">待结算(元)</span>
            </div>
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{(Number(shareholderDetail.payMoney)-Number(shareholderDetail.refundMoney)) | formatNumberOther}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">直推销售额(元)</span>
            </div>
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{shareholderDetail.number}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">成单数</span>
            </div>
            <div class="c-flex-column c-aligni-center c-w33 c-mt32">
              <span class="c-fs32 c-fw-b">{{shareholderDetail.payNumber}}</span>
              <span class="c-mt10 c-fs20 c-fc-gray">成单人数</span>
            </div>
          </div>
        </div>
      </div>

      <div class="c-ph24 c-mt80">
        <my-small-tabbar :tabList="tabList" :tabIndex="tabIndex" :flexClass="'c-justify-start'" :isScroll="true" @changeTab="changeLevel"></my-small-tabbar>
        <template v-if="tabIndex == 1">
          <div class="c-bg-white c-br10 c-ph20 c-pv20 c-mt20" v-for="(item, index) in list" :key="index">
            <div class="c-flex-row c-justify-sb c-aligni-center">
              <div class="c-flex-row c-aligni-center c-fs20">
                <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww56 c-hh56 c-brp50 c-mr8"/>
                {{item.nickname || '未知'}}
              </div>
              <span class="c-fs20 c-fc-gray">{{item.prodType == 116 ? '购买面授课' : item.prodType == 118 ? '购买机构课' : item.prodType == 183 ? '升级为股东' : (item.prodType == 53 ? '购买约课' : '')}}</span>
            </div>
            <div class="c-mt20 c-bd-b1 c-pb20 c-flex-row">
              <img :src="$addXossFilter(item.prodType == 183 ? require('@/assets/i/wap/newAreaAgent/shareholder.png') : item.cover, require('@/assets/defult270.png'))" class="c-ww180 c-hh120 c-br10"/>
              <div class="c-ml20 c-hh120 c-flex-column c-justify-sb c-flex-grow1 c-w0">
                <div class="c-text-ellipsis2 c-fs24 c-fw-b">{{item.name}}</div>
                <span class="c-fc-gray c-fs20">结算时间：{{item.settlementType == 3 && item.finishAt == null ? '首次签到后结算' : item.finishAt}}</span>
              </div>
            </div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-fs20 c-fc-gray c-mt20">
              <div class="c-flex-row c-aligni-center">
                <span class="">实付{{'￥' | iosPriceFilter}}{{(Number(item.payMoney)-Number(item.refundMoney)) | formatNumberOther}}</span>
                <span class="c-ml10">{{item.tag == 1 ? '区代' : item.tag == 2 ? '直推' : (item.tag == 4 ? '间推' : '')}}收益</span>
                <span class="theme-fc c-ml10">{{'￥' | iosPriceFilter}}{{(Number(item.amount) + Number(item.freezeMoney)) | formatNumberOther}}</span>
                <span class="c-ml10">已结算</span>
                <span class="theme-fc c-ml10">{{'￥' | iosPriceFilter}}{{Number(item.amount) | formatNumberOther}}</span>
              </div>
              <div class="c-ml10 c-ww90 c-hh30 c-p"><div class="theme-bg c-opacity10 c-ww90 c-hh30 c-pa" style="top: 0;left: 0;z-index:1;"></div><div class="c-fs18 c-ww90 c-textAlign-c theme-fc c-pa c-opacity100" style="top: 0.05rem;left: 0;z-index:10;">{{item.status == 0 ? '结算中' : '已完成'}}</div></div>
            </div>
          </div>
        </template>
        <template v-else-if="tabIndex == 2">
          <div class="c-bg-white c-br10 c-ph20 c-pv20 c-mt20 c-flex-row c-justify-sb" v-for="(item, index) in list" :key="index">
            <div class="c-flex-row">
              <img v-if="item.dest == 1" :src="require('../../../assets/i/wap/voting/bank.png')" class="c-ww56 c-hh56 c-brp50 c-m-0auto" />
              <span v-else class="iconfont c-fs56 c-fc-green">&#xe928;</span>
              <div class="c-flex-column c-ml12">
                <span class="c-fs26">提现到银行卡</span>
                <span class="c-mt8 c-fc-gray c-fs20">{{item.createdAt}}</span>
              </div>
            </div>
            <div class="c-flex-column c-aligni-end">
              <span class="c-fs32"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.amount || '0.00'}}</span>
              <span class="c-mt8 c-fs20" :class="item.status == -1 ? 'c-fc-xmlred' : item.status == 2 ? 'c-fc-gray' : 'c-fc-green'">{{item.status == -1 ? '已驳回' : item.status == 2 ? '已到账' : '处理中'}}</span>
            </div>
          </div>
        </template>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无明细"></loading-status-tem>
      </div>

      <open-modal :openModal="timeModal" @closeModal="closeTimeModal">
        <div class="c-ph24 c-bg-white c-pz1000 c-br-tr10 c-br-tl10 c-pb40 c-fc-xblack c-fs22">
          <div class="c-fs28 c-fw-b c-textAlign-c c-pt30 c-fc-xblack c-p">
            选择时间
            <span class="iconfont c-fs18 c-fc-gray c-pa c-p-t40 c-p-r8" @click="closeTimeModal">&#xe8fd;</span>
          </div>
          <div class="c-pv24 c-bd-b1 c-flex-row c-justify-sb c-aligni-center" v-for="(item, index) in timeMap" :key="index" @click="timeType(index)">
            <span>{{timeMap[index]}}</span>
            <span class="icon iconfont c-fs28" :class="index == timeValue ? 'theme-fc' : 'c-fc-gray'">{{index == timeValue ? '&#xe6f6;' : '&#xe6f7;'}}</span>
          </div>
        </div>
      </open-modal>
    </div>
    <div class="c-bg-sgray" v-if="listType==4 && shareholderDetail && shareholderDetail.userInfo">
      <header class="c-fs32 c-fc-xblack c-pv28 c-bg-white c-bd-b1 c-ph24 c-flex-row c-justify-sb c-aligni-center">
        <div class="c-w10"></div>
        <template>
          <div class="c-w80 c-textAlign-c c-lh">
            <div>{{shareholderDetail.userInfo ? shareholderDetail.userInfo.sName : ''}}</div>
          </div>
        </template>
        <router-link :to="{path:'/homePage/agent/agentInfo?fromType=shareholder'}" class="icon iconfont c-fs32 c-fc-sgray c-w10 c-textAlign-r c-lh c-pt8 c-hh32 c-block">&#xe715;</router-link>
      </header>

      <div class="c-mt10">
        <div class="c-bg-white c-fs28 c-fc-xblack c-pv28 c-ph24 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="">昵称:</div>
          <div class="">{{shareholderDetail.userInfo.nickname}}</div>
        </div>
        <div class="c-bg-white c-fs28 c-fc-xblack c-pv28 c-ph24 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="">真实姓名:</div>
          <div class="">{{shareholderDetail.userInfo.realName}}</div>
        </div>
        <div class="c-bg-white c-fs28 c-fc-xblack c-pv28 c-ph24 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="">手机号:</div>
          <div class="">{{shareholderDetail.userInfo.mobile}}</div>
        </div>
        <div class="c-bg-white c-fs28 c-fc-xblack c-pv28 c-ph24 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="">所在地:</div>
          <div class="">{{shareholderDetail.agent.province}} {{shareholderDetail.agent.city}} {{shareholderDetail.agent.area}}</div>
        </div>
      </div>
    </div>
    <div v-if="listType==6">
      <div class="c-p c-pb64">
        <img class="c-hh148 c-w100 c-maxw640" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/memberIndex/bg_blue_mb4.png"/>
        <div class="c-ph24 c-w100 c-maxw640 c-pa" style="top:0.55rem;">
          <div class="c-mt20 c-bg-white c-br10 c-pb32 c-ph20">
            <div class="c-flex-row c-justify-sb c-aligni-center c-pv20 c-bd-b1-f6">
              <span class="c-fs24">代理区域</span>
              <span class="c-fs22 c-fc-gray" @click="areasModal = true" v-if="areaAgents.length > 0">{{areaAgents[areaValue].name}}<span class="iconfont c-ml10 c-fs20 c-fs-gray">&#xe635;</span></span>
            </div>
            <div class="c-flex-row c-justify-sa c-flexw-wrap" v-if="areaIncomInfo != null">
              <div class="c-flex-column c-aligni-center c-w33 c-mt32">
                <span class="c-fs32 c-fw-b">{{Number(areaIncomInfo.payMoney).toFixed(2)}}</span>
                <span class="c-mt10 c-fs20 c-fc-gray">销售业绩(元)</span>
              </div>
              <div class="c-flex-column c-aligni-center c-w33 c-mt32">
                <span class="c-fs32 c-fw-b">{{Number(areaIncomInfo.money).toFixed(2)}}</span>
                <span class="c-mt10 c-fs20 c-fc-gray">已结算分红(元)</span>
              </div>
              <div class="c-flex-column c-aligni-center c-w33 c-mt32">
                <span class="c-fs32 c-fw-b">{{Number(areaIncomInfo.freezeMoney).toFixed(2)}}</span>
                <span class="c-mt10 c-fs20 c-fc-gray">待结算分红(元)</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="c-ph24 c-mt64">
        <div class="c-fs26">明细</div>
        <div class="c-bg-white c-br10 c-ph20 c-pv20 c-mt24" v-for="(item, index) in list" :key="index">
          <div class="c-flex-row c-justify-sb c-aligni-center">
            <div class="c-flex-row c-aligni-center c-fs20">
              <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww56 c-hh56 c-brp50 c-mr8"/>
              {{item.nickname || '未知'}}
            </div>
            <span class="c-fs20 c-fc-gray">{{item.prodType == 116 ? '购买面授课' : item.prodType == 118 ? '购买机构课' : item.prodType == 183 ? '升级为股东' : (item.prodType == 53 ? '购买约课' : '')}}</span>
          </div>
          <div class="c-mt20 c-bd-b1 c-pb20 c-flex-row">
            <img :src="$addXossFilter(item.prodType == 183 ? require('@/assets/i/wap/newAreaAgent/shareholder.png') : item.cover, require('@/assets/defult270.png'))" class="c-ww180 c-hh120 c-br10"/>
            <div class="c-ml20 c-hh120 c-flex-column c-justify-sb c-flex-grow1 c-w0">
              <div class="c-text-ellipsis2 c-fs24 c-fw-b">{{item.name}}</div>
              <span class="c-fc-gray c-fs20">结算时间：{{item.finishAt}}</span>
            </div>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-fs20 c-fc-gray c-mt20">
            <div class="c-flex-row c-aligni-center">
              <span class="">实付{{'￥' | iosPriceFilter}}{{item.payMoney | formatNumberOther}}</span>
              <span class="c-ml10">分红</span>
              <span class="theme-fc c-ml10">{{'￥' | iosPriceFilter}}{{Number(Number(item.money) + Number(item.freezeMoney)) | formatNumberOther}}</span>
            </div>
            <div class="c-ml10 c-ww90 c-hh30 c-p"><div class="theme-bg c-opacity10 c-ww90 c-hh30 c-pa" style="top: 0;left: 0;z-index:1;"></div><div class="c-fs18 c-ww90 c-textAlign-c theme-fc c-pa c-opacity100" style="top: 0.05rem;left: 0;z-index:10;">{{item.status == 1 ? '已结算' : (item.status == 0 ? '结算中' : '')}}</div></div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无明细"></loading-status-tem>
      </div>

      <open-modal :openModal="areasModal" @closeModal="areasModal = false">
        <div class="c-ph24 c-bg-white c-pz1000 c-br-tr10 c-br-tl10 c-pb40 c-fc-xblack c-fs22">
          <div class="c-fs28 c-fw-b c-textAlign-c c-pt30 c-fc-xblack c-p">
            选择区域
            <span class="iconfont c-fs18 c-fc-gray c-pa c-p-t40 c-p-r8" @click="areasModal = false">&#xe8fd;</span>
          </div>
          <div class="c-pv24 c-bd-b1 c-flex-row c-justify-sb c-aligni-center" v-for="(item, index) in areaAgents" :key="index" @click="areasType(index)">
            <span>{{item.name}}</span>
            <span class="icon iconfont c-fs28" :class="index == areaValue ? 'theme-fc' : 'c-fc-gray'">{{index == areaValue ? '&#xe6f6;' : '&#xe6f7;'}}</span>
          </div>
        </div>
      </open-modal>
    </div>
    <div v-if="listType==7" class="c-ph24 c-p">
      <div class="c-fs24 c-fc-xblue c-textAlign-r c-pv20" @click="isShowPresentInfo = true;">赠送须知<span class="icon iconfont c-ml10">&#xe635;</span></div>
      <div class="c-bg-white c-br10 c-ph24 c-pv20 c-mb20" v-for="(item, index) in list" :key="index" @click="goPresentRecord(item.id, item.prodId, item.prodType)">
        <div class="c-flex-row">
          <div class="c-ww180">
            <div class="c-w100 c-br10 c-p">
              <vip-custom-img v-if="(item.prodType == cfrom.vip || item.prodType == cfrom.svip) && item.cover" :cover="item.cover" :imgClass="'c-ww180 c-hh120'" :fontClass="{
                boxStyle: 'c-pv30 c-pl12',
                name: 'c-fs20 c-text-ellipsis1',
                duration: 'c-fs16'}" :hasText="false"/>
              <img v-else-if="item.prodType == cfrom.vip" :src="require('@/assets/i/wap/course/vip.png')" alt="" class="c-ww180 c-hh120 img-pe-none c-br10" />
              <img v-else-if="item.prodType == cfrom.svip" :src="require('@/assets/i/wap/course/svip.png')" alt="" class="c-ww180 c-hh120 img-pe-none c-br10" />
              <img class="c-br10 c-ww180" v-else :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))"/>
              <div class="c-pv4 c-fs14 c-ph4 c-fc-white c-translucent-balck50 c-br4 c-pa cTap">{{prodMapType[item.prodType]}}</div>
            </div>
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-flex-shrink0 c-ml20">
            <div class="c-text-ellipsis1 c-fs24 c-fc-xblack">{{item.name}}</div>
            <div class="c-mt10 c-fs20 c-lh28 c-fc-gray">总数 {{item.totalNum}}，剩余 {{item.leftNum}}</div>
            <div class="c-mt10 c-flex-row c-justify-sb c-aligni-end">
              <div class="c-fs22 theme-fc">{{'￥' | iosPriceFilter}}{{item.prodPrice}}</div>
              <div class="c-fs18 c-fc-white c-pv10 c-ph32 c-br32" :class="item.nameTip == '' && item.leftNum > 0 ? 'theme-bg-gradient' : 'c-bg-ccc'" @click.stop="goPresent(item)">赠送</div>
            </div>
          </div>
        </div>
        <div class="c-fs20 c-fc-gray c-bd-t1 c-pt20 c-mt20" v-if="item.nameTip != ''">{{item.nameTip}}</div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无数据"></loading-status-tem>
      <cj-popup v-model="isShowPresentInfo" round :closeable="true" close-icon-position="top-right" close-icon="icon-guanbi" @closed="isShowPresentInfo=false">
        <div class="c-bg-white c-br20 c-p c-pt36 c-pb30 c-ww540">
          <span @click="isShowPresentInfo = false;" class="iconfont c-fs24 c-fc-gray c-pa c-p-r20 c-p-t20">&#xe61b;</span>
          <p class="c-fc-xblack c-fs28 c-fw500 c-mb20 c-textAlign-c">赠送须知</p>
          <div class="c-fc-sblack c-fs24 c-mb20 c-textAlign-l c-ph30">
            <p>1、用户领取成功后才扣名额，分享出去不会马上扣名额</p>
            <p>2、分享出去的链接24小时内有效，超时后无法领取</p>
            <p>3、没有上级股东、或者上级股东是您的用户，才可以领取您赠送的商品</p>
            <p>4、如果领取人已有赠送课程的永久使用权限，那么无法继续领取赠送的课程</p>
            <p>5、如果领取人已有赠送课程的使用权限，且课程的有效期大于当前赠送的有效期，那么无法继续领取赠送的课程（比如用户已买过课程A，且课程A是10月30日前有效，现在您赠送的课程A是10月20日前有效。因为赠送的课程有效期小于用户已购买课程的有效期，所以不支持领取）</p>
          </div>
          <div @click="isShowPresentInfo=false" class="c-ww270 c-hh60 c-br36 c-fs24 c-flex-row c-aligni-center c-justify-center c-m-0auto c-fc-white theme-bg">知道了</div>
        </div>
      </cj-popup>
    </div>

    <share-poster v-if="posterInfo && (listType == 1 || listType == 2)" :typeStr="typeStr" :showPoster="showPoster" :posterInfo="posterInfo" @closePoster="showPoster = false;"></share-poster>
  </div>
</template>

<script>
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import vipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import openModal from "@/components/templates/common/openModal.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import SharePoster from "./sharePoster.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 0;
let LIMIT = 10;
export default {
  name: 'shareholderDetail',
  components: {
    MySmallTabbar,
    newSearchBar,
    loadingStatusTem,
    openModal,
    SharePoster,
    vipCustomImg
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      dataStatus: 'HAS_MORE_DATA',
      searchName: '',
      cfrom: global.ckFrom,
      prodMapType: global.prodMapType,
      list: [],
      shareholderDetail: null, //股东详情
      listType: -1, //0:我的客户，1：推广课程，2.优惠券，3.收入明细, 4.股东详情
      timeModal: false,
      timeValue: 3,
      timeMap: {
        1: '7天',
        2: '本月',
        3: '总计'
      },
      tabList: [ //tab
        {
          title: "收入",
          index: 1
        },
        {
          title: "支出",
          index: 2
        }
      ],
      tabIndex: 1,
      couponType: {
        1: "兑换码",
        2: "免费券",
        3: "满减券",
        4: "抵价券",
        5: "折扣券",
        6: "付费券"
      },
      couponStatus: {
        1: "未开始",
        2: "进行中",
        3: "已停止",
        4: "已过期",
        5: "已作废"
      },
      isShareholder: false, //是否是股东
      showPoster: false, //股东分享海报
      posterInfo: null, //海报信息
      typeStr: '', //海报类别
      areasModal: false, //是否显示股东代理区域
      areaValue: 0, //选择的股东区域的值
      areaAgents: [], //代理区域
      areaIncomInfo: null, //代理区域的参数值
      spreadTabIndex: 0, //0单品课程, 1代金券
      isShowPresentInfo: false, //展示赠送须知
    }
  },
  created() {
    utilJs.appShare(this);
  },
  beforeRouteEnter: (to, from, next) => {
    if (to.query.listType == 1) {
      to.meta.bottomCorpInfoBg = 'c-bg-FFEFE6'
    } else {
      to.meta.bottomCorpInfoBg = 'c-bg-sgray'
    }
    next()
  },
  mounted() {},
  computed: {},
  watch: {
    $route(to, from) {}
  },
  methods: {
    goPresentRecord(id, prodId, prodType) {
      this.$routerGo(this, "push", {
        path: "/homePage/shareholder/shPresentRecord",
        query: {id: id, prodId: prodId, prodType: prodType}
      });
    },
    goPresent(item) {
      if (item.nameTip != '' || item.leftNum == 0) {
        return;
      }
      let data = {
        prodId: item.prodId,
        prodType: item.prodType,
        desc: item.prodType == this.cfrom.vip || item.prodType == this.cfrom.svip ? `领取后，可享受${item.prodType == this.cfrom.vip ? 'VIP' : 'SVIP'}会员权益，快来领取吧` : '领取后，就可以在平台上学习本课程了，快来领取吧',
        number: 1
      }
      utilJs.postMethod(
        global.apiurl + "shareholder/shareholderPresentEquity",
        data,
        (res) => {
          this.$routerGo(this, "push", {
            path: "/homePage/course/presentCourse",
            query: {id: res.id, memberFrom: 3, sUserId: localStorage.getItem('shareholderId')}
          });
        },
        (fres) => {}
      );
    },
    shareCoupon(item) {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/shareholder/shCouponDetail?refereeId=" +
        localStorage.getItem("userId") + '&id=' + item.redeemCodeId;
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      this.posterInfo = {
        uname: localStorage.getItem("userName"),
        uheadImg: localStorage.getItem("userHeadImg"),
        url: shareUrl,
        price: Number(item.price),
        name: item.name,
        statusStr: item.redeemType == 24 ? '适用指定商品' : item.redeemType == 25 ? '适用商城商品' : item.redeemType == 26 ? '使用所有推广课程' : '',
        timeStr: item.validStatus == 1 ? "领券当日起，" + item.validPeriod + '天内可用' : (item.validStatus == 2 ? "领券第二日起，" + item.validPeriod + '天内可用' : (item.startAt.split(" ")[0] + "-" + item.endAt.split(" ")[0])),
      }
      this.typeStr = "spreadCoupon";
      this.showPoster = true;
    },
    doCopy(redeemCodeId) {
      let content = `${window.location.href.split("#")[0]}#/homePage/shareholder/shCouponDetail?id=${redeemCodeId}`
      if (localStorage.getItem("shareholderId")) {
        content += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      utilJs.copyText(content);
    },
    goCouponDetail(redeemCodeId) {
      this.$routerGo(this, "push", {
        path: "/homePage/shareholder/shCouponDetail",
        query: {id: redeemCodeId, fromShare: 1}
      });
    },
    changeSpreadTab(tabIndex) {
      this.spreadTabIndex = tabIndex;
      pageIndex = 1;
      this.list = [];
      this.getList();
    },
    goDetail(id, prodType) { //目前只有面授课跟约课
      let url = prodType == global.ckFrom.edu || prodType == global.ckFrom.eduJiGou ? "/edu/eduDetail" : `/activity/activityDetail?ActivityNo=${id}&from=reservation`;
      this.$routerGo(this, "push", {
        path: url,
        query: { id: id }
      })
    },
    goCustomDetail(id, virtualId) {
      this.$routerGo(this, "push", { path: '/homePage/shareholder/shCustomDetail', query: {userId: id, virtualId: virtualId} });
    },
    inviteFriends(id, prodType) {
      let pt = prodType == global.ckFrom.edu || prodType == global.ckFrom.eduJiGou ? global.ckFrom.eduInviteCard : prodType;
      let q = { cId: -1, extId: id, ckFrom: pt };
      if (localStorage.getItem("shareholderId")) {
        q.shareholderId = localStorage.getItem("shareholderId");
      }
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadCustom', query: q });
    },
    goExchange(id) { //查看优惠券详情
      this.$routerGo(this, "push", { path: "/member/myExchange/exchangeCodeDetail", query: { redeemCodeId: id, fromType: 'shareholder' } });
    },
    changeLevel(num) {
      if (num != this.tabIndex) {
        this.tabIndex = num;
        pageIndex = 1;
        this.list = null;
        this.getList();
      }
    },
    timeType(key) {
      this.timeValue = key;
      this.getIncomInfo();
      this.closeTimeModal();
    },
    clickTimeModel() {
      this.timeModal = true;
    },
    closeTimeModal() {
      this.timeModal = false;
    },
    areasType(index) {
      this.areaValue = index;
      this.getAreaIncomInfo();
      pageIndex = 1;
      this.list = null;
      this.getList();
      this.areasModal = false;
    },
    startSearch(e) {
      this.searchName = e.searchValue;
      pageIndex = 1;
      this.getList();
    },
    getList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      let url = '';
      if (this.listType == 0) {
        url = "shareholder/shareholderCustomerList?page=" + pageIndex + '&limit=' + LIMIT + '&name=' + this.searchName;
      } else if (this.listType == 1) {
        url = this.spreadTabIndex == 0 ? `shareholder/shareholderCourseList?page=${pageIndex}&limit=${LIMIT}&name=${this.searchName}` : `shareholder/shareholderCouponList?page=${pageIndex}&limit=${LIMIT}`
      } else if (this.listType == 3) {
        if (this.tabIndex == 1) {
          url = "shareholder/shareholderIncomeList?page=" + pageIndex + '&limit=' + LIMIT;
        } else {
          url = "shareholder/getWidthDrawList?page=" + pageIndex + '&limit=' + LIMIT;
        }
      } else if (this.listType == 6) {
        let aId = this.areaAgents.length > 0 && this.areaAgents[this.areaValue] ? this.areaAgents[this.areaValue].areaId : 0;
        let level = this.areaAgents.length > 0 && this.areaAgents[this.areaValue] ? this.areaAgents[this.areaValue].level : 0;
        url = "shareholder/shareholderAreaAgentIncomeList?page=" + pageIndex + '&limit=' + LIMIT + '&areaId=' + aId + '&level=' + level;
      } else if (this.listType == 7) {
        url = "shareholder/getShareholderEquity";
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + url,
        res => {
          if (this.listType == 7) {
            this.list = res;
            this.dataStatus = res == null || res.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            if (pageIndex == 1) {
              this.list = res.data;
            } else {
              this.list = [...this.list, ...res.data];
            }
            if (res.data && (res.data.length < LIMIT)) {
              this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              this.dataStatus = 'HAS_MORE_DATA';
              pageIndex++;
            }
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    getApplyPage() {
      let $this = this;
      utilJs.getMethod(global.apiurl + 'shareholder/shareholderApplyPage', function (res) {
        $this.shareholderDetail = res;
      });
    },
    getIncomInfo() {
      utilJs.getMethod(global.apiurl + 'shareholder/shareholderIncomeInfo?timeType=' + this.timeValue, (res) => {
        this.shareholderDetail = res;
      });
    },
    getAreaAgent() {
      utilJs.getMethod(global.apiurl + 'shareholder/getAreaAgent', (res) => {
        this.areaAgents = res;
        this.areaValue = 0;
        this.getAreaIncomInfo();
      });
    },
    getAreaIncomInfo() {
      let areaV = this.areaAgents[this.areaValue];
      utilJs.getMethod(`${global.apiurl}shareholder/shareholderAreaAgentIncomeInfo?level=${areaV.level}&areaId=${areaV.areaId}`, (res) => {
        this.areaIncomInfo = res;
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/agent/agentIndex?fromType=shareholder&refereeId=" +
        localStorage.getItem("userId");
      if (this.listType == 1) {
        shareUrl = window.location.href.split("#")[0] + "#/homePage/shareholder/shareholderDetail?listType=1&refereeId=" + localStorage.getItem("userId");
      }
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = this.listType == 1 ? "优质好课推荐" : "股东中心";
      let shareDesc = this.listType == 1 ? "分享一波优质好课给你。点击查看详情" : "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/agent/agentIndex?fromType=shareholder&refereeId=" +
        localStorage.getItem("userId");
      if (this.listType == 1) {
        shareUrl = window.location.href.split("#")[0] + "#/homePage/shareholder/shareholderDetail?listType=1&refereeId=" + localStorage.getItem("userId");
      }
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = this.listType == 1 ? "优质好课推荐" : "股东中心";
      let shareDesc = this.listType == 1 ? "分享一波优质好课给你。点击查看详情" : "点击查看详情";
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.list.length > 0) {
          this.getList();
        }
      });
    },
    initData() {
      utilJs.toPageScrollTop()
      this.isShareholder = localStorage.getItem("shareholderId") && localStorage.getItem("shareholderId").length > 0 && localStorage.getItem("shareholderId") == localStorage.getItem("userId") ? true : false;
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.searchName = '';
      this.list = [];
      this.tabIndex = 1;
      this.timeModal = false;
      this.timeValue = 3;
      this.shareholderDetail = null;
      this.areasModal = false;
      this.areaValue = 0;
      this.areaAgents = [];
      this.areaIncomInfo = null;
      this.spreadTabIndex = this.companyAuth.enableDeclareModule != 1 ? 0 : 1; //报单系统开启后，约课这个tab隐藏
      this.isShowPresentInfo = false;
      this.posterInfo = this.listType == 1 ? {
        uname: localStorage.getItem("userName"),
        uheadImg: localStorage.getItem("userHeadImg")
      } : null;
      if (this.listType == 4) {
        this.getApplyPage();
      } else {
        this.getList();
        if (this.listType == 3) {
          this.getIncomInfo();
        }
        if (this.listType == 6) {
          this.getAreaAgent();
        }
      }
    },
  },
  activated() {
    if (this.$route.query.listType && this.$route.query.listType != this.listType) {
      this.list = [];
    }
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    this.listType = this.$route.query.listType || 0;
    if (this.listType == 0) {
      setDocumentTitle("我的客户");// eslint-disable-line
    } else if (this.listType == 1) {
      setDocumentTitle("推广");// eslint-disable-line
      this.typeStr = "spreadCourse";
    } else if (this.listType == 2) {
      setDocumentTitle("优惠券管理");// eslint-disable-line
      this.typeStr = "spreadCoupon";
    } else if (this.listType == 3) {
      setDocumentTitle("收益明细");// eslint-disable-line
      this.initData();
    } else if (this.listType == 4) {
      setDocumentTitle("股东详情");// eslint-disable-line
      this.initData();
    } else if (this.listType == 6) {
      setDocumentTitle("区代业绩");// eslint-disable-line
      this.initData();
    } else if (this.listType == 7) {
      setDocumentTitle("名额管理");// eslint-disable-line
      this.initData();
    }
    this.showPoster = false;
    if ((this.listType == 0 || this.listType == 1 || this.listType == 2) && utilJs.checkNeedInitData(this.list)) {
      this.initData();
    }
    this.wechatShare();
    if (this.listType != 4) {
      window.addEventListener('scroll', this.windowScrollFunction);
    }
  },
  deactivated() {
    if (this.listType != 4) {
      window.removeEventListener('scroll', this.windowScrollFunction);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bgColor{background-color: #F73339;}
.bgColor1{background-color: #FED352;}
.pt446 {
  padding-top: 11.15rem;
}
.cColor{
  color: #FF0502;
}
.bg-gradient {
  background: linear-gradient(
    90deg,
    rgba(255,48,12,1) 0%,
    rgba(255,48,12,0.7) 100%
  );
  background: var(#FF0502);
}
.courseShareholder {
  background: url('../../../../public/i/wap/coupon/cousetg.png') no-repeat center;
  background-size: 100% 100%;
  height: 10rem;
}
.courseNoShareholder {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/coursetj.png') no-repeat center;
  background-size: 100% 100%;
  height: 10rem;
}
.bt-wrapper {
  border-radius: .7rem .7rem 0 0;
  background-color: #FFEFE6;
}
.wrapper-list {
  border-radius: .7rem .7rem 0 0;
  background-color: #FFEFE6;
}
.course-tgTrans {
  /* transform: translateY(-3.15rem); */
  margin-top: -3.15rem;
}
.course-tjTrans {
  transform: translateY(-2.75rem);
  margin-top: -2.75rem;
}
/* .bt-wrapper .item {
  color: #C96000;
} */
/* .bt-wrapper .item:nth-child(1).item-active {
  padding-left: 1.5rem;
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/activeOne.png') no-repeat;
  background-size: 100% 100%;
  padding: .6rem .75rem;
}
.bt-wrapper .item:nth-child(2).item-active {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/activeTwo.png') no-repeat;
  background-size: 100% 100%;
  padding: .6rem .75rem;
}
.item-active {
  position: relative;
} */
.bgImg {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/spreadEduCourse5.png') no-repeat;
  min-height: 23.5rem;
  background-size: 100% 11.15rem;
}
.bgImg1 {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/spreadEduCourse6.png') no-repeat;
  min-height: 23.5rem;
  background-size: 100% 11.15rem;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/shareholderVoucherPay.png") no-repeat 100%;
  background-size: 100% 100%;
}
.coupon-used {
  background: url("../../../../public/i/wap/coupon/gray.png") no-repeat 100%;
  background-size: 100% 100%;
}
.shareAll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/btnImg.png') no-repeat center;
  background-size: 100% 100%;
  width: 9.5rem;
  height: 2rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.8rem;
  font-size: 0.7rem;
  color: #FF300C;
}
.cTap {
  top: 0.15rem;
  left: 0.2rem;
}
.fc-brown {
  color: #C96000
}
.fc-lbrown {
  color: #E4A772
}
.bg-brown {
  background: #C96000
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.1rem;
  width: 0.8rem;
  border-radius: 3px;
}
.fc-red {
  color: #FF320E;
}
</style>
